<template>
  <div>
    <router-link to="/find">发现音乐</router-link> |
    <router-link :to="`/my/${id}`">我的音乐</router-link> |
    <router-link to="/friend?name=小明">朋友</router-link>
    <!-- 7、设置挂载点 -->
    <router-view></router-view>
    <div>
      <button @click="toPage">点我，跳转到发现音乐页面</button>
      <button @click="goPage">点我，跳转到我的音乐页面</button>
    </div>
  </div>
</template>
<script>
export default  {
  data(){
    return {
      id: 123
    }
  },
  methods: {
    /**
     * 编程式导航：指的是使用js方法进行页面跳转
     * 语法一：
     * this.$router.push({
     *  path: "路由路径"
     * })
     * 语法二：
     * this.$router.push({
     *  name: "路由名"  // 路由名需要在定义路由规则的时候声明好
     * })
     * 
     * */ 
    toPage(){
      // 跳转到发现音乐页面
      this.$router.push({
        path: "/find"
      })
    },
    goPage(){
      // 跳转到我的音乐页面
      this.$router.push({
        name: "my"
      })
    }
  }
}
</script>